<template>
	<view class="index">
		<!-- 头部的图片页面 -->
		<view class="index1">
			<view class="index-top">
				<image class="top-img" src="../../static/home/1a00487f-e474-4aa2-a743-19e29c3dabe0.png" mode=""></image>
			</view>
			</view>
			<view style="height: 15rpx;"></view>
			<!-- 公告页面 -->
		    <view class="inform">
		    	<image src="../../static/home/公告.png" mode=""></image>
				<text>本条消息为公告！</text>
		    </view>	
			<!-- 导航栏 -->
			<view class="navigation">
			  <view class="nav-item" v-for="(item,index) in list" :key="index">
			  	<image :src="item.image" mode=""></image>
			  	<text>{{item.text}}</text>
			  </view>
			</view>
			
			 <view class="list">
				 <block v-for="(item , index) in clicklist.s" :key="index">
		    	<index-list :list="item"></index-list>
		    	</block>
		    </view>
			
			<view class="lists" v-for="(item , index) in clicklist.b" :key="index">
				<index-list :Height="310" :width="710" :list="item"></index-list>
			</view>
			
			<!-- 个人积分 -->
			<view class="integrate">
			<integrate></integrate>	
			</view>
			<!-- 每日咨询 -->
			<view class="consult">
				<view class="top">
					<text class="top-text1">每日咨询</text>
					<text class="top-text2" @tap="gomore">查看更多</text>
				</view>
				<index-consult></index-consult>
				<index-consult></index-consult>
				<index-consult></index-consult>
			</view>
			</view>
		 

</template>

<script>
	export default {
		data() {
			return {
			list:[
				{id:0,image:"../../static/home/组 1.png",text:"反扫登陆"},
				{id:1,image:"../../static/home/组 1(1).png",text:"积分商城"},
				{id:2,image:"../../static/home/组 1(2).png",text:"周边服务"},
				{id:3,image:"../../static/home/组 1(3).png",text:"回收指南"},
				{id:4,image:"../../static/home/组 1(4).png",text:"照片上传"},
			],
			clicklist:{
				s:[
					{id:0 , icon:'../../static/home/组 1(5).png' , name:"预约回收",text1:"两小时上门",text2:"垃圾回收 从你我做起",image:"../../static/home/588ku_879fdfbcc3910d0fd289aa4b28b48d3d_12424678.png",but:"我要回收" ,color:"#18cd90"},
				{id:1 , icon:'../../static/home/组 1(6).png' , name:"分类查询",text1:"快速了解",text2:"如何进行垃圾分类",image:"../../static/home/588ku_ab5e8b79bdd07f3110fa60139618f603_13383733.png",but:"我要查询",color:"#f1bd82"}
				],
				b:[
					{id:2 , icon:'../../static/home/组 1(7).png' , name:"垃圾分类小游戏",text1:"保护环境从我做起",text2:"垃圾分一分 环境没十分",image:"../../static/home/588ku_56eeb5f71eac9437c5a1f07bb24834d1_12534364.png",but:"点击开始",color:"#627ed7"}
				]
			}
			}
		},
      methods:{
		  gomore(){
			  uni.navigateTo({
			  	url:"/pages/more/more"
			  })
		  }
	  }
		
	}
</script>

<style lang="less" scoped>
	.index{
		// display: flex;
		// justify-content: center;
		width: 100%;
		height: 100%;
		background-color:#f5f5f5;
		padding-bottom: 20rpx;
		.index1{
			position: relative;
			// margin-top: 30rpx;
			width: 100%;
			height: 430rpx;
			background-color:#00c783 ;
			.index-top{
			position: relative;
			top: 30rpx;
			// margin-top: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100vw;
			height: 410rpx;
			background-color: #f5f5f5;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			transform-style: preserve-3d;	
			.top-img{
				width: 700rpx;
			    height: 360rpx;
				border-radius: 15rpx;
			}
		}
		
		}
		
	}
	.index-top::after{
		content: '';
		display: block;
		position: absolute;
		background-color:#f5f5f5 ;
		margin: 0 auto;
		opacity: 0.5;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		width: 97vw;
		height: 400rpx;
		top: -15rpx;
		transform: translateZ(-10rpx);  
	}
	.index-top::before{
		content: '';
		display: block;
		position: absolute;
		background-color:#f5f5f5 ;
		margin: 0 auto;
		opacity: 0.5;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		width: 93vw;
		height: 400rpx;
		top: -30rpx;
		transform: translateZ(-10rpx);  
	}
	.inform{
		// position: relative;
		// top: 30rpx;
		margin: 0 auto;
		width: 700rpx;
		height: 80rpx;
		// line-height: 80rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
		image{
			width: 40rpx;
			height:34rpx;
			padding-left: 20rpx;
			// filter: drop-shadow(20rpx,20rpx,20rpx,20rpx);
		}
		text{
			padding-left: 20rpx;
			font-size: 30rpx;
			font-weight: 300;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	.navigation{
		display: flex;
		align-items: center;
		justify-content: space-around;
		width: 100vw;
		height: 220rpx;
		
	}
	.nav-item{
		width: 130rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image{
			width: 100rpx;
			height: 100rpx;
		}
		text{
			font-size: 24rpx;
			padding-top: 20rpx;
			
		}
	}
	.list{
		display: flex;
		align-items: center;
		justify-content: space-evenly;
	}
	.lists{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}
	.integrate{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.consult{
		position: relative;
		width: 720rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 15rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		.top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 52rpx;
			width: 100%;
			padding-top: 10rpx;
			.top-text1{
				padding-left: 30rpx;
			}
			.top-text2{
				padding-right: 10rpx;
				color: #9e9e9e;
				font-size: 24rpx;
			}
		}
		.top::before{
			content: '';
			position: absolute;
			display: inline-block;
			background-color: #00c783;
			width: 6rpx;
			height: 26rpx;
			top: 16rpx;
			left: 12rpx;
			border-radius: 10rpx;
		}
	}
	
</style>
